<template>
	<view>
		<app-header :fixed="false" :title="headerTitle" />
		<view class="glm-banner">
			<image src="/subpages/static/images/header-bj.png" mode="widthFix" class="bg"></image>
			<image src="/subpages/static/images/header-bj-img.png" mode="widthFix" class="img"></image>
		</view>
		<view class="comm-container">
			<view class="main-box">
				<view class="tab-list">
					<view class="tab-item" @click="active = item.id,handleClick()" :class="active == item.id ? 'active': ''" v-for="(item,index) in tabList" :key="index">
						<text>{{item.label}}</text>
					</view>
				</view>
				<view class="box-list">
					<view class="box-item">
						<template v-if="query.sendName == ''">
							<view class="inp" @click="openAddressForm('sender')">
								<image src="/subpages/static/images/icon-02.png" class="icon" mode="widthFix" />
								<text class="name">请填写寄件人信息</text>
							</view>
							<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;" @click="openAddressBook('sender')">地址薄</view>
						</template>
						<template v-else>
							<view class="inp val" @click="openAddressForm('receiver')">
								<view class="left">
									<image src="/subpages/static/images/icon-02.png" class="icon" mode="widthFix" />
								</view>
								<view class="right">
									<text class="name">{{query.sendName}}</text>
									<text class="tel">{{query.sendPhone}}</text>
									<text class="content">{{query.sendAddressDetail}}</text>
								</view>
							</view>
							<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;" @click="openAddressBook('receiver')">地址薄</view>
						</template>
					</view>
					<view class="box-item status">
						<template v-if="query.recName == ''">
							<view class="inp">
								<image src="/subpages/static/images/icon-03.png" class="icon" mode="widthFix" />
								<text class="name">请填写收件人信息</text>
							</view>
							<view class="btn">
								<u-button
								  type="success"
								  shape="circle"
								  text="去寄件"
								  style="width: 150rpx;"
								    @click="nextLink(`/subpages/views/courier/courierService?size=${active == 0 ? 'small' : 'large'}`)"
								  color="linear-gradient( 180deg, #FC9603 0%, #FF6900 100%)"
								></u-button>
							</view>
						</template>
						<template v-else>
							<view class="inp val" @click="openAddressForm('receiver')">
								<view class="left">
									<image src="/subpages/static/images/icon-03.png" class="icon" mode="widthFix" />
								</view>
								<view class="right">
									<text class="name">{{query.recName}}</text>
									<text class="tel">{{query.recPhone}}</text>
									<text class="content">{{query.recAddressDetail}}</text>
								</view>
							</view>
							<view class="btn">
								<u-button
								  type="success"
								  shape="circle"
								  text="去寄件"
								  style="width: 150rpx;"
								  @click="nextLink(`/subpages/views/courier/courierService?size=${active == 0 ? 'small' : 'large'}`)"
								  color="linear-gradient( 180deg, #FC9603 0%, #FF6900 100%)"
								></u-button>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="glm-tab-list">
			<view class="glm-tab-item status-02" style="background: linear-gradient( 136deg, #ADDCFD 0%, #E5F5FF 65%, #EAF7FF 100%);"  @click="nextLink(`/subpages/views/courier/courierService?type=1&region=international`)">
				<image class="img" src="@/subpages/static/images/image-01.png" />
				<text class="name">寄国际</text>
			</view>
			<view class="glm-tab-item status-02" style="background: linear-gradient( 136deg, #FFC18D 0%, #FFDDC0 57%, #FFF8F1 100%);" @click="nextLink(`/subpages/views/address/list`)">
				<image class="img" src="@/subpages/static/images/image-02.png" />
				<text class="name">地址管理</text>
			</view>
			<view class="glm-tab-item status-01" @click="nextLink(`/subpages/views/order/list`)">
				<view class="left">
					<image class="img" mode="widthFix" src="@/subpages/static/images/image-03.png" />
					<text class="name">我的订单</text>
				</view>
				<view class="next">
					查看更多
					<image src="@/subpages/static/images/icon-04.png" mode="widthFix" class="icon" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AppHeader from "@/subpages/components/header.vue"
	export default {
		components: {
			AppHeader
		},
		data() {
			return {
				type: 1,
				headerTitle: "寄快递",
				active: 0,
				sendVal: "",
				closedVal: "",
				tabList: [{
					id: 0,
					label: "寄快递"
				},{
					id: 1,
					label: "寄大件"
				}],
				region: "domestic",
				query: {
					sendName: "",
					sendPhone: "",
					sendAddressDetail: "",
					recName: "",
					recPhone: "",
					recAddressDetail: ""
				}
			}
		},
		methods: {
			handleClick(){
				this.query.sendName=""
				this.query.sendPhone=""
				this.query.sendAddressDetail=""
			},
			openAddressForm(type) {
				const that = this;
				uni.navigateTo({
				    url: `/subpages/views/address/index?type=${type}&region=${this.region}`,
				   events: {
				    Selected: (data) => {
						if (type == "sender") {
							 this.query.sendName = data.name;
							 this.query.sendPhone = data.phone;
							 this.query.sendAddressDetail = data.province + data.city + data.county + data.addressDetail;
						}else if (type == "receiver") {
							 this.query.recName = data.name;
							 this.query.recPhone = data.phone;
							 this.query.recAddressDetail = data.province + data.city + data.county + data.addressDetail;
						}
					 }			 
				   }
				 });
			},
			openAddressBook(type) {
				 uni.navigateTo({
				     url: `/subpages/views/address/list?type=${type}&region=${this.region}`,
				    events: {
				     Selected: (data) => {
					  if (type === "sender") {
						 // 如果 type 是 sender，更新 sender 对象
						 this.query.sendName = data.name;
						 this.query.sendPhone = data.phone;
						 this.query.sendAddressDetail = data.addressDetail;
					   } else if (type === "receiver") {
						 // 如果 type 是 receiver，更新 receiver 对象
						 this.query.recName = data.name;
						 this.query.recPhone = data.phone;
						 this.query.recAddressDetail = data.addressDetail;
					   }
					 }
					 
				    }
				  });
			},
			nextLink(path) {
				uni.navigateTo({
						url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		background: #CAE9FF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #FFFFFF;
		margin-top: -80rpx;
		z-index: 98;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
		position: relative;
		.tab-list {
			.tab-item {
				width: 50%;
				padding: 20rpx 0;
				display: inline-block;
				box-sizing: border-box;
				text-align: center;
				position: relative;
				color: #646464;
				text {
					position: relative;
					z-index: 99;
				}
				&.active {
					text{
						position: relative;
						top: -20rpx;
						&:before{
							content: "";
							background: linear-gradient( 90deg, #9CCAFF 0%, rgba(151,199,255,0) 100%);
							width: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							height: 10rpx;
						}
					}
				}
				&.active::before {
					content: "";
					position: absolute;
					width: 100%;
					height: 120%;
					left: -6rpx;
					bottom: 0;
					background: linear-gradient( 180deg, #CAE9FF 0%, #FFFFFF 100%);
					border-radius: 30rpx 30rpx 0rpx 0rpx;
					border: 6rpx solid #FFFFFF;
				}
			}
		}
		.box-list {
			background: #fff;
			padding: 40rpx 20rpx;
			.box-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				align-items: center;
				.val {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.tel {
						margin-left: 20rpx;
					}
					.content {
						margin-left: 20rpx;
						display: block;
					}
				}
				&.status {
					background: #FFF8F2;
					border: 3rpx solid #FF7000;
					border-radius: 20rpx;
				}
				.icon {
					width: 45rpx;
					height: 45rpx;
					vertical-align: middle;
				}
				.name {
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	.glm-tab-list {
		margin: 0 20rpx;
		.glm-tab-item {
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
			border-radius: 20rpx;
			padding: 25rpx;
			box-sizing: border-box;
			&.status-01 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				.img {
					width: 150rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.name {
					font-size: 36rpx;
					margin-left: 20rpx;
				}
				.icon {
					width: 15rpx;
					vertical-align: middle;
					margin-left: 10rpx;
				}
				.next {
					font-size: 24rpx;
				}
			}
			&.status-02 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 48%;
				float: left;
				margin-left: 4%;
				margin-bottom: 30rpx;
				&:nth-child(1) {
					margin-left: auto;
				}
 				.img {
					width: 150rpx;
					height: 120rpx;
				}
				.name {
					font-size: 36rpx;
				}
			}
		}
	}
</style>